<template>
  <div>
      <div>
        <img :src="imgPath" :style="imgcss">
      </div>
      用户名：<input type="text" v-model="userObj.userName"/><br>
      密码---：<input type="password" v-model="userObj.pwd"/><br>
      <input type="button" value="登陆" @click="land()">
      <input type="button" value="确定" @click="ok">
    <input type="button" value="改变样式" @click="changeStyle">
    <hr/>
    单价：{{price}}<br>
    数量:<input type="text" v-model="num"><br>
    总价：{{price * num}}
    <hr>
    {{age >= 18 ?"成年":"小孩"}}
    <hr>
    单选框：<br>
    性别：<input type="radio" value="男" v-model="sex">男
      <input type="radio" value="女" v-model="sex">女<br>
    {{sex}}
    <hr>
    下拉框：<br>
    <select v-model="edu">
      <option value="gz">高中</option>
      <option value="dz">大专</option>
      <option value="bk">本科</option>
    </select>
    {{edu}}
    <input type="button" @click="changeItem" value="改变选项">
    <hr>
    复选框：<br>
    <input type="checkbox" value="体育" v-model="likeArray">体育
    <input type="checkbox" value="音乐" v-model="likeArray">音乐
    <input type="checkbox" value="美术" v-model="likeArray">美术
    <input type="checkbox" value="上网" v-model="likeArray">上网
    <input type="checkbox" value="游戏" v-model="likeArray">游戏<br>
    {{likeArray}}<br>
    <hr/>
    工资：<input type="text" ref="money"><br>
    <input type="button" value="获取值" @click="showValue"><br>
    <hr/>
    成绩：{{grade}}<br>
    是否合格：<span v-if="grade >= 60">合格</span>
        <span v-else>不合格</span><br>
    等级：
      <span v-if="grade >= 90 ">优秀</span>
      <span v-else-if="grade >= 80 ">良好</span>
      <span v-else-if="grade >= 60 ">中等</span>
      <span v-else>差</span>

    <table border="1" cellspacing="0" width="80%">
      <thead>
        <tr><th>序号</th><th>编号</th><th>姓名</th><th>工资</th><th>状态</th><th>操作</th></tr>
      </thead>

      <tbody>
        <tr v-for="(em,index) in emList" :key="em.id">
          <td>{{index}}</td>
          <td>{{em.id}}</td>
          <td>{{em.name}}</td>
          <td>{{em.money}}</td>
          <td>{{em.status}}</td>
          <td><input type="button" v-if="em.status == '在职'" value="离职"/></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userObj:{},
      imgcss:{width:'200px',height:'200px',border:"3px solid red"},
      imgPath:require('./img/14.jpg'),
      price:30,
      num:1,
      age:10,
      sex:"男",
      edu:"",
      likeArray:[],
      grade: 80,
      emList:[
        {id:1,name:"张三",money:8000,status:"在职"},
        {id:3,name:"刘勇",money:9000,status:"在职"},
        {id:4,name:"何红",money:12000,status:"离职"},
        {id:6,name:"周大",money:10000,status:"在职"}
      ]
    }
  },
  methods:{
    land(){
      if(this.userObj.userName == "java" && this.userObj.pwd == "123"){
        //经路由跳转首页
        //  this.$router.push("/index");
        //经路由跳转首页，并传递参数
        //name表示注册的路由名称 ，params描述传递参数
        this.$router.push({name:"Index",params:{id:2,name:"tom"}});
      }
      else{
        alert("登陆失败");
      }
    },
    ok(){
      alert("确定");
    },
    changeStyle(){
      this.imgcss.width = "100px";
      this.imgcss.height = "100px";
    },
    changeItem(){
      this.edu = "bk";
    },
    showValue(){
      alert(this.$refs.money.value);
      this.$refs.money.style.color = "red";
    }
  }
}
</script>

<style scoped>

</style>